<template>
    <div class="app">
        <ul class="infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="disabled"
            infinite-scroll-distance="20" style="overflow: auto">
            <li v-for="(anime, index) in animeList" :key="index" class="infinite-list-item">
                {{ anime }}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            count: 20,
            animeList:['a','b','c','e','f','a','b','c','e','f','a','b','c','e','f','a','b','c','e','f'],
            anime:'g',
            disabled: false
        };
    },
    methods: {
        // 加载更多时追加数据
        loadMore() {
            if (this.count >= 100) {
                this.disabled = true
            } else {
                console.log("load");
                this.animeList.push(this.anime)
            }
        },
    },
};
</script>
<style scoped>
.infinite-list {
    height: 200px;
    background-color: skyblue;
}
</style>